<template>
	<view class="dynamic-comment-box">
		<view class="title-box">
			<view class="user-box" @click="jumpToUserInfo()">
				<view class="avatar-box">
					<image class="avatar-img" :src="comment.avatar"></image>
					<image class="sex-img" src="/static/portraitTagGirl-s.png"></image>
				</view>
				<text class="name-text">{{ comment.nickName }}</text>
			</view>
			<view class="like-box" @click="likeComment()">
				<image class="like-img" :src="comment.click ? '/static/feellLiked.png' : '/static/feelLike.png'"></image>
				<text class="like-text">{{ comment.clicks }}</text>
			</view>
		</view>
		<view class="comment-content-box">
			<text class="context-text">{{ comment.content }}<text class="context-spe-text"></text></text>
			<text class="time-text">{{ getTimeDiff(comment.createTime) }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: "dynamicCommentItem",
		data() {
			return {

			};
		},
		props: {
			comment: {}
		},
		methods: {
			jumpToUserInfo() {
				uni.navigateTo({
					url: '/pages/userDetai?userId=' + this.comment.userId
				})
			},
			getTimeDiff(startTime) {
				var new_date = new Date();
				var old_date = new Date(startTime);
				var diffMinutes = parseInt((new_date - old_date) / 1000 / 60);
				var hours = parseInt(diffMinutes / 60);
				var days = parseInt(diffMinutes / 60 / 24);
				var month = parseInt(diffMinutes / 60 / 24 / 31);
				var year = parseInt(diffMinutes / 60 / 24 / 31 / 12);
				let timeStr = diffMinutes + '分钟前';
				if (hours > 0) {
					timeStr = hours + '小时前';
				}
				if (days > 0) {
					timeStr = days + '天前';
				}
				if (month > 0) {
					timeStr = month + '个月前';
				}
				if (year > 0) {
					timeStr = yesr + '年前';
				}
				return timeStr;
			},
			likeComment() {
				if (!this.comment.click) {
					const params = {
						entityType: 2,
						entityId: this.comment.id
					}
					this.$apis.click(params).then(res => {
						if (res.code === 0) {
							uni.showToast({
								title: this.comment.click ? '取消成功!' : '感谢您的点赞!',
								icon: 'success'
							})
							uni.$emit('commentClick', this.comment);
						}
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	.dynamic-comment-box {
		padding: 24rpx 0 24rpx 0;
		
		.title-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.user-box {
				display: flex;
				align-items: center;
				
				.avatar-box {
					width: 80rpx;
					height: 80rpx;
					position: relative;

					.avatar-img {
						width: 80rpx;
						height: 80rpx;
						border-radius: 40rpx;
						background-color: aquamarine;
					}

					.sex-img {
						width: 26rpx;
						height: 26rpx;
						position: absolute;
						bottom: 0;
						right: 0;
					}
				}
				
				.name-text {
					margin-left: 32rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #222222;
				}
			}
			
			.like-box {
				display: flex;
				align-items: center;
				
				.like-img {
					width: 32rpx;
					height: 30rpx;
				}
				
				.like-text {
					width: 40rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #222222;
					margin-left: 16rpx;
					text-align: end;
				}
			}
		}
		
		.comment-content-box {
			width: 542rpx;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			margin-left: 112rpx;
			
			.context-text {
				width: 100%;
				font-size: 28rpx;
				font-weight: 400;
				color: #222222;
				
				.context-spe-text {
					color: #FF5E2E;
				}
			}
			
			.time-text {
				margin-top: 8rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
			}
		}
	}
</style>
